<template>
  <div><el-upload
      class="upload-demo"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="3"
      :on-exceed="handleExceed"
      :before-upload="handleBeforeUpload"
      :file-list="fileList">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>

   <div v-for="item in fileList " :key="item.id">
      <div>{{item.name}}</div>
   </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log("****************:",file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return false;
    },
    handleBeforeUpload(file){
      console.log("file:",file);
      return false;
    },
    // :before-upload或者:on-change绑定的方法

    beforeUpload(file, fileList) {

      fileList.map((item,index)=>{
        const fileType = item.name.substring(item.name.lastIndex0f(".") + 1)
      })

      if (file.size / (1024 * 1024) > 500) { // 限制文件大小

        this.$message.warning(`当前限制文件大小不能大于500M`)

        return false

      }

      let suffix = this.getFileType(file.name) //获取文件后缀名

      let suffixArray = ["jpg", "png", "jpeg", "gif"] //限制的文件类型，根据情况自己定义

      if (suffixArray.indexOf(suffix) === -1) {

        this.$message({

          message: "文件格式错误",

          type: "error",

          duration: 2000

        })

      }

      return suffixArray

    },

    getFileType(name) {

      let startIndex = name.lastIndexOf(".")

      if (startIndex !== -1) {

        return name.slice(startIndex + 1).toLowerCase()

      } else {

        return ""

      }

    }
  }
}
</script>